<template>
    <div ref="shopifySectionTemplate" class="shopify-section-template">
        <video ref="video" autoplay loop muted src="/1.mp4"></video>
        <div class="banner__content">
            <div class="content"><span style="color: #fff;"><span style="font-size: 20px;">Why
                        Not</span><br><br><br><span
                        style="font-size: 90px;font-weight: 700;">Customize<br>YourWatch?</span></span></div>
        </div>
        <div @click="setPlay('play-button')" ref="play-button"
            class="play-button">
            <svg v-if="isShow" class="icon icon-play icon-md" viewBox="0 0 36 36" stroke="none" fill="currentColor"
                xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M34 17.5006C34 18.3302 33.5707 19.0963 32.8683 19.5206L9.535 33.6629C9.164 33.8869 8.74867 34 8.33333 34C7.93667 34 7.54 33.8986 7.183 33.6936C6.45267 33.274 6 32.4915 6 31.6429V3.35817C6 2.50962 6.45267 1.72708 7.183 1.30752C7.91333 0.885606 8.814 0.899749 9.535 1.33816L32.8683 15.4805C33.5707 15.9048 34 16.6709 34 17.5006">
                </path>
            </svg>
            <svg v-if="!isShow" class="icon" viewBox="0 0 36 36" stroke="currentColor" fill="none"
                xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-width="6" d="M9 4V32"></path>
                <path stroke-linecap="round" stroke-width="6" d="M27 4V32"></path>
            </svg>
        </div>
    </div>
</template>

<script>

export default {
    name: 'WristWatchShopify',
    components: {
    },
    data() {
        return {
            isShow: ""
        };
    },

    mounted() {
        this.isShow = this.$refs.video.paused
        window.addEventListener("scroll", (e) => {
            // setTimeout(() => {
            //     if (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop > 60) {
            //         // this.$refs.shopifySectionTemplate.style.top = "92px"
            //         console.log(this.$refs.shopifySectionTemplate.style.top);
            //         this.$refs.shopifySectionTemplate.style.transition = "all 0.5s"
            //     } else {
            //         // this.$refs.shopifySectionTemplate.style.top = ""
            //         this.$refs.shopifySectionTemplate.style.transition = "all 0.5s"

            //     }
            // }, 100)
        })
    },

    methods: {
        setPlay() {
            if (this.$refs.video.paused) {
                this.$refs.video.play()
                this.isShow = false
            } else {
                this.$refs.video.pause()
                this.isShow = true
            }
        }
    },
};
</script>

<style lang="less" scoped>
.shopify-section-template {
    height: 850px;
    position: relative;
    video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .banner__content {
        position: absolute;
        top: 30%;
        z-index: 2;
        width: 100%;

        .content {
            text-align: center;

            span {
                span {}

                br {}

                span {
                    br {}
                }
            }

        }

        span {}
    }

    .play-button {
        position: absolute;
        bottom: 30px;
        right: 30px;
        width: 40px;
        height: 40px;

        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.7);

        .icon {
            transform: scale(0.3);
            color: rgb(23, 23, 23);

        }
        .icon-play {
        }
        .icon-md {
        }
    }
}
</style>